<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aanmeldapplicatie</title>
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css">
<link href="css/print.css" rel="stylesheet" media="print" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>
<div id="page">
<!-- header on -->
<header class="gl-header">
  <div class="gl-inner cf">
  	<div class="bl-hd-logos">
  		<h1>Aanmeldapplicatie <span>basisschoolleerlingen</span></h1>
      <figure class="el-ppo"><a href="#" title="PPO"><img src="images/hd-logo-ppo.png" alt="PPO"></a></figure>
      <figure class="el-dh"><a href="#" title="Den Haag"><img src="images/hd-logo-dh.png" alt="Den Haag"></a></figure>
    </div>
    <dl class="bl-hd-user">
    	<dt>OBS Annie M.G. Schmidtschool</dt>
      <dd><a href="#" title="Meer informatie">Meer informatie</a></dd>
      <dd><a href="#" title="Instellingen">Instellingen</a></dd>
    </dl>
  </div>
</header>
<!-- header off -->
<!-- content on -->
<div class="gl-tabs">
	<div class="gl-inner cf">
  	<ul class="bl-ls-tabs">
      <li><a href="#" title="Aanmelden">Aanmelden <span>Schooljaar <strong>2016/2017</strong></span></a></li>
      <li class="el-active"><a href="#" title="Toelaten">Toelaten <span>Schooljaar <strong>2016/2017</strong></span></a></li>
      <li><a href="#" title="Historie">Historie <span>Eerdere schooljaren</span></a></li>
    </ul>
    <div class="bl-ls-form">
    	<h3>Zoek kind <a class="el-help" href="#tip_zoek"></a></h3>
      <!-- tooltip content on -->
      <div class="un-tip-data" id="tip_zoek">
      	<h4>Zoek kind</h4>
        <p>In GBA staan gegevens van kinderen van 1-jarige leeftijd. Om een kind aan te melden, wijzigen of af te melden kunt u een kind vinden op BSN of briefcode. Als alternatief kunt ook op achternaam en geboortedatum zoeken. Als een kind niet gevonden wordt kunt u deze alsnog  aanmelden.</p>
      </div>
      <!-- tooltip content off -->
      <ul class="un-form-type cf">
      	<li><input type="radio" name="type_zoek" id="type_brief" /><label for="type_brief">Briefcode</label></li>
        <li><input type="radio" name="type_zoek" id="type_bsn" /><label for="type_bsn">BSN</label></li>
        <li><input type="radio" name="type_zoek" id="type_name" /><label for="type_name">Naam en geboortedatum</label></li>
      </ul>
      <div class="un-form-bsn" data-radio-id="type_brief">
      	<div class="cf">
          <p class="un-col">
            <label>Vul briefcode in.</label>
            <input type="text" id="code_brief" value="">
            <button class="el-btn-orange" type="submit"><span>Ga</span></button>
          </p>
        </div>
      </div>
      <div class="un-form-bsn" data-radio-id="type_bsn">
      	<div class="cf">
          <p class="un-col">
            <label>Vul BSN in.</label>
            <input type="text" id="code_bsn" value="">
            <button class="el-btn-orange" type="submit"><span>Ga</span></button>
          </p>
        </div>
      </div>
      <div class="un-form-name" data-radio-id="type_name">
      	<div class="cf">
          <p class="un-col">
            <label>Achternaam</label>
            <input type="text" id="code_name" value="">
          </p>
          <p class="un-col">
            <label>Geboortedatum</label>
            <input class="el-small" type="text" placeholder="DD-MM-JJJJ" value="">
            <button class="el-btn-orange" type="submit"><span>Ga</span></button>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="gl-def">
	<div class="gl-inner cf">
    <div class="bl-ls-note cf">
      <h4>De toelatingsperiode is nog niet gestart.</h4>
      <p>Per 1 oktober t/m 14 oktober vindt de verwerking van aanmeldingen voor de toelating plaats. <a href="#" title="meer info">meer info</a></p>
    </div>
  	<section class="bl-ls">
    	<div class="un-ls-ttl cf">
        <h2>120 aanmeldingen</h2>
        <p class="el-size">bij leerlingplafond van 60</p>
        <p><a class="el-graph" href="#" title="Toon in grafiek">Toon in grafiek</a></p>
      </div>
      <div class="un-ls-filter cf">
      	<ul>
        	<li class="el-active"><a href="#" title="Nog te verwerken"><span><span>Nog te verwerken</span> <em>(107)</em></span></a></li>
        	<li><a href="#" title="Toegelaten"><span><span>Toegelaten</span> <em>(10)</em></span></a></li>
        	<li><a href="#" title="Afgewezen"><span><span>Afgewezen</span> <em>(5)</em></span></a></li>
        </ul>
      </div>
      <div class="bl-ls-overlay"></div>
    </section>
  </div>
</div>
<!-- content off -->
<!-- footer on -->
<footer class="gl-footer">
	<div class="gl-inner cf">
  	<div class="bl-ft-accord">
    	<h3>Veelgestelde vragen</h3>
      <dl>
      	<dt>Voor welke kinderen is de regeling van toepassing?</dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit ligula quis velit pharetra egestas. Ut molestie elit non massa. Vivamus tincidunt bibendum velit. Quisque nisl diam, nonummy eu, lobortis consequat, mollis ut, tellus. In iaculis. <a href="#" title="Lees verder">Lees verder</a></dd>
        <dt>Wat is de overgangsregeling?</dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit ligula quis velit pharetra egestas. Ut molestie elit non massa. Vivamus tincidunt bibendum velit. Quisque nisl diam, nonummy eu, lobortis consequat, mollis ut, tellus. In iaculis. <a href="#" title="Lees verder">Lees verder</a></dd>
        <dt>Voor welke scholen geldt de regeling?</dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit ligula quis velit pharetra egestas. Ut molestie elit non massa. Vivamus tincidunt bibendum velit. Quisque nisl diam, nonummy eu, lobortis consequat, mollis ut, tellus. In iaculis. <a href="#" title="Lees verder">Lees verder</a></dd>
      </dl>
      <p><a href="#" title="Alle veelgestelde vragen...">Alle veelgestelde vragen...</a></p>
    </div>
    <div class="bl-ft-logos">
    	<p>Initiatief van de gemeente Den Haag en het Platform Primair Onderwijs.</p>
      <figure><a href="#" title="Den Haag"><img src="images/ft-logo-dh.gif" alt="Den Haag"></a></figure>
      <figure><a href="#" title="PPO"><img src="images/ft-logo-ppo.gif" alt="PPO"></a></figure>
    </div>
  </div>
</footer>
<!-- footer off -->
</div>
<script src="js/jq.core.js"></script>
<script src="js/jq.function.js"></script>
</body>
</html>
